<template>
	<view class="container">
		<u-navbar
			:is-fixed="false"
			:border-bottom="false"
			:is-back="true"
			:title="currentTab"
			:background="{ background: 'linear-gradient(90deg, #f398a0, #fa3534)' }"
			title-color="#fff"
		>
		</u-navbar>
		<view>
			<u-search placeholder="请输入商品名称" v-model="keyword" @custom="search" @search="search"></u-search>
			<view class="menus">
				<view class="left">
					<view @click="changeTab(item)" class="tab" :class="currentTab === item.name ? 'tab-focus' : ''" :key="index" v-for="(item, index) in typeList">{{ item.name }}</view>
				</view>
				<view class="right">
					<view class="menu" v-for="menu in menuList" @click="toList(menu)">
						<image class="img" :src="imgUrl + menu.img"></image>
						<view class="text">{{ menu.name }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getMenu, getType } from '../../api/system/api'
export default {
	data() {
		return {
			typeList: [],
			menuList: [],
			menus: [],
			current: 0,
			isDetail: false,
			detailInfo: {},
			userInfo: {},
			keyword: '',
			currentTab: '休闲食品',
			imgUrl: "http://127.0.0.1:3000/",
		}
	},
  onShow() {
		// this.currentTab = '休闲食品';
		// this.menuList = this.typeList[0].children;
  },
	mounted() {
		getType({
			page: 1,
			pageSize: 1111
		}).then(res => {
			this.typeList = res.data.data.filter((v) => !v.parentId);
			let son = res.data.data.filter((v) => v.parentId);
			for (let t of this.typeList) {
				let sons = son.filter(v => v.parentId == t.id)
				t.children = sons
			}
			if (this.typeList.length) {
				this.currentTab = this.typeList[0].name
				this.menuList = this.typeList[0].children;
			}
		})
    uni.getStorage({     
      key:'userInfo',
      success: (res) => {
        this.userInfo = res.data;
				this.currentTab = this.typeList[0].name
      }
    })
	},
	methods: {
		changeTab(item) {
			this.menuList = item.children;
			this.currentTab = item.name
		},
		search() {
			this.$u.route('/pages/good/goodList', {
        key: this.keyword
      })
		},
		toList(menu) {
			this.$u.route('/pages/good/goodList', {
        type: menu.name
      })
		}
	}
}
</script>

<style lang="scss" scoped>
.flex-center {
	display: flex;
	align-items: center;
	gap: 30rpx;
	padding: 0 30rpx;

	.tabs {
		width: calc(100% - 150rpx);
	}

	.btn {
		width: 120rpx;
	}
}

.menus {
	display: flex;
	.menu {
		width: 48%;
		padding: 10rpx;
		margin-bottom: 12rpx;
	}

	.left {
		width: 20%;
		height: 80vh;
		background: #F4F4F4;

		.tab {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: #F4F4F4;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
		}

		.tab-focus {
			background: #fff;
			color: orange;
		}
	}
	.right {
		width: 80%;
		padding: 12rpx 20rpx;

		.menu {
			width: 28%;
			height: 160rpx;
			float: left;
			margin-right: 20rpx;
			.img {
				width: 100%;
				height: 120rpx;
			}
			.text {
				width: 100%;
				text-align: center;
			}
		}
	}

	.img {
		width: 100%;
		height: 200rpx;
	}
	.name {
		text-align: center;
		font-weight: bold;
		margin-top: 20rpx;
		color: orangered;
	}
}


.detail {
	position: relative;
	.icon {
		position: absolute;
		top: 30rpx;
		left: 30rpx;
		z-index: 99;
		font-size: 40rpx;
	}

	.name {
		margin-top: 20rpx;
		line-height: 60rpx;
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
		width: 100%;
	}

	.desc {
		color: #999;
		padding: 30rpx;
	}
}

</style>
